'use client'

import { Experiment, Group, User } from '@prisma/client'
import { UserGroupIcon, AcademicCapIcon } from '@heroicons/react/24/outline'

interface EnrichedGroup extends Group {
  members: { user: Pick<User, 'id' | 'name' | 'email'>; role: string }[]
}

interface EnrichedExperiment extends Experiment {
  groups: EnrichedGroup[]
}

interface StudentGroupViewProps {
  experiments: EnrichedExperiment[]
  currentUserId: string
}

export default function StudentGroupView({ experiments, currentUserId }: StudentGroupViewProps) {
  return (
    <div className="mt-8 space-y-6">
      {experiments.length === 0 ? (
        <div className="text-center py-12">
          <AcademicCapIcon className="mx-auto h-12 w-12 text-gray-400" />
          <h2 className="mt-2 text-lg font-medium text-gray-900">暂无实验分组信息</h2>
          <p className="mt-1 text-sm text-gray-500">
            您目前没有参与任何需要分组的实验，或者您尚未被分配到任何小组。
          </p>
        </div>
      ) : (
        experiments.map((experiment) => {
          const studentGroup = experiment.groups.find(group => 
            group.members.some(member => member.user.id === currentUserId)
          )

          return (
            <div key={experiment.id} className="bg-white shadow rounded-lg p-6">
              <h2 className="text-xl font-semibold text-gray-900 mb-4">实验: {experiment.title}</h2>
              {studentGroup ? (
                <div className="border rounded-lg p-4 bg-gray-50">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center">
                      <UserGroupIcon className="h-6 w-6 text-primary-600 mr-3" />
                      <h3 className="text-lg font-medium text-gray-900">{studentGroup.name}</h3>
                    </div>
                    {studentGroup.members.find(m => m.user.id === currentUserId && m.role === 'LEADER') && (
                       <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                         组长
                       </span>
                    )}
                  </div>
                  {studentGroup.description && (
                    <p className="text-sm text-gray-700 mb-3">{studentGroup.description}</p>
                  )}
                  <div>
                    <h4 className="text-sm font-medium text-gray-800 mb-2">小组成员:</h4>
                    <ul className="space-y-1">
                      {studentGroup.members.map((member) => (
                        <li key={member.user.id} className="flex items-center text-sm text-gray-600">
                          <span className={`font-medium ${member.user.id === currentUserId ? 'text-primary-700' : ''}`}>
                            {member.user.name || member.user.email}
                          </span>
                          {member.role === 'LEADER' && (
                            <span className="ml-2 text-xs text-gray-500">(组长)</span>
                          )}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              ) : (
                <div className="text-center py-6 border rounded-lg border-dashed border-gray-300">
                  <UserGroupIcon className="mx-auto h-10 w-10 text-gray-400" />
                  <p className="mt-2 text-sm text-gray-600">
                    您在此实验中尚未被分配到任何小组。
                  </p>
                </div>
              )}
            </div>
          )
        })
      )}
    </div>
  )
} 